<template>
    <button :class="classes" @click="subscribe">Subscribe</button>
</template>

<script>
    export default {
        props: ['active'],

        data() {
            return {
                actively: this.active,
            };
        },

        computed: {
            classes() {
                return ['btn', this.actively ? 'btn-primary' : 'btn-default'];
            }
        },

        methods: {
            subscribe() {
                axios[
                        (this.actively ? 'delete' : 'post')
                    ](location.pathname + '/subscriptions');

                this.actively = ! this.actively;
            }
        }
    }
</script>

<style scoped>

</style>